quickSettings: Adjust menu width using contraints instead of CSS

The width of the overlay actor for quick settings menus was as wide as
the whole box pointer and the menus placed inside the overlay actor were
then adjusted with CSS margins to have the same width and spacing as the
other elements.

This meant that in `QuickSettingsLayout` the width of the overlay actor
would have to be dependent on the size of a parent actor rather than the
associated container. In the next commit we are however going to need to
use the correct width, so this commit changes the width of the overlay
actor to be the same as other actors in the grid.

This also avoids the need to use CSS to adjust the width and horizontal
placement.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/4136>

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index 6c6f0622456bf0a508181608165a2596c0d4eab7..d887e1032cdd12b7cde918f245b3fc4c03d10309 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -157,7 +157,7 @@ $quick_toggle_checked_separator_color: if(
 
   border-radius: $base_border_radius * 3;
 
-  margin: $base_padding * 2 $base_padding * 3 0;
+  margin: $base_padding * 2 0 0;
 
   .popup-menu-item > StIcon {
     -st-icon-style: symbolic;

diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index cc3157607df923165a1c626431ae40801b7c03d8..8a055e56b91782c49e296189df32d40bd13dd139 100644 (file)
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -769,33 +769,41 @@ export const QuickSettingsMenu = class extends PopupMenu.PopupMenu {
         this.box.add_child(this._grid);
         this._grid.add_child(placeholder);
 
+        const xConstraint = new Clutter.BindConstraint({
+            coordinate: Clutter.BindCoordinate.X,
+            source: this._boxPointer,
+        });
         const yConstraint = new Clutter.BindConstraint({
             coordinate: Clutter.BindCoordinate.Y,
             source: this._boxPointer,
         });
 
         // Pick up additional spacing from any intermediate actors
-        const updateOffset = () => {
+        const updateOffset = (constraint, axis) => {
             const laters = global.compositor.get_laters();
             laters.add(Meta.LaterType.BEFORE_REDRAW, () => {
                 const offset = this._grid.apply_relative_transform_to_point(
                     this._boxPointer, new Graphene.Point3D());
-                yConstraint.offset = offset.y;
+                constraint.offset = offset[axis];
                 return GLib.SOURCE_REMOVE;
             });
         };
-        this._grid.connect('notify::y', updateOffset);
-        this.box.connect('notify::y', updateOffset);
-        this._boxPointer.bin.connect('notify::y', updateOffset);
 
+        this._grid.connect('notify::x', () => updateOffset(xConstraint, 'x'));
+        this.box.connect('notify::x', () => updateOffset(xConstraint, 'x'));
+        this._boxPointer.bin.connect('notify::x',
+            () => updateOffset(xConstraint, 'x'));
+
+        this._grid.connect('notify::y', () => updateOffset(yConstraint, 'y'));
+        this.box.connect('notify::y',  () => updateOffset(yConstraint, 'y'));
+        this._boxPointer.bin.connect('notify::y',
+            () => updateOffset(yConstraint, 'y'));
+
+        this._overlay.add_constraint(xConstraint);
         this._overlay.add_constraint(yConstraint);
-        this._overlay.add_constraint(new Clutter.BindConstraint({
-            coordinate: Clutter.BindCoordinate.X,
-            source: this._boxPointer,
-        }));
         this._overlay.add_constraint(new Clutter.BindConstraint({
             coordinate: Clutter.BindCoordinate.WIDTH,
-            source: this._boxPointer,
+            source: this._grid,
         }));
 
         this.actor.add_child(this._overlay);